﻿<!DOCTYPE html>     
    
<head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Positioning Example</title>     
<meta name="viewport" content="width=device-width, initial-scale=0.5">     
<link rel="stylesheet" href="jquery.mobile.min.css" />     
<script src="jquery-2.1.4.min.js"></script>     
<script src="jquery.mobile.min.js"></script>     
</head>               
<body>
 <div data-role="page">
	<!--使用ul标签声明一个列表-->
	<ul data-role="listview" data-inset="true">
		<!--使用属性data-role="list-divider"作为分隔栏使用-->
		<li data-role="list-divider">家人</li>
		<!--这个才是真正的列表项-->
		<li><a href="#">
			<h3>爸爸</h3>					<!--列表中的内容-->
			<p>13334333564</p>			<!--使用p标签实现换行-->
		</a></li>
		<!--此处省略部分内容，读者可自行添加-->
		<li data-role="list-divider">陌生人</li>
		<li><a href="#">
			<h3>10086</h3>
			<p>10086</p>
		</a></li>
		<li><a href="#">
			<h3>骗子1</h3>
			<p>13334333564</p>
		</a></li>
		<li><a href="#">
			<h3>骗子2</h3>
				<p>13334333564</p>
			</a></li>
		</ul>
    </div>

</body>
</html>
